import React, { useState } from 'react';
import './GameInfo.css';

const GameInfo = ({ gameInfo, petState }) => {
  const { day, coins, collectedPets = [] } = gameInfo;
  const { name, age, stage } = petState;
  
  // 是否显示收集的宠物列表
  const [showCollectedPets, setShowCollectedPets] = useState(false);
  
  // 根据成长阶段返回对应的中文描述
  const getStageName = (stage) => {
    switch(stage) {
      case 'baby': return '幼年期';
      case 'young': return '青年期';
      case 'adult': return '成年期';
      case 'elder': return '老年期';
      default: return '未知';
    }
  };

  return (
    <div className="game-info">
      <div className="info-header">
        <h2 className="pet-name">{name}</h2>
        <div className="pet-age-stage">
          <span className="pet-age">{age}天</span>
          <span className="pet-stage">{getStageName(stage)}</span>
        </div>
      </div>
      <div className="game-stats">
        <div className="stat-item">
          <span className="stat-icon">📅</span>
          <span className="stat-value">第{day}天</span>
        </div>
        <div className="stat-item">
          <span className="stat-icon">💰</span>
          <span className="stat-value">{coins}金币</span>
        </div>
        <div className="stat-item" onClick={() => setShowCollectedPets(!showCollectedPets)}>
          <span className="stat-icon">🏆</span>
          <span className="stat-value">收集宠物({collectedPets.length})</span>
        </div>
      </div>
      
      {showCollectedPets && collectedPets.length > 0 && (
        <div className="collected-pets">
          <h3>已收集宠物</h3>
          <div className="pets-list">
            {collectedPets.map((pet, index) => (
              <div key={index} className="collected-pet-item">
                <span className="pet-emoji">{pet.emoji}</span>
                <span className="pet-name">{pet.name}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default GameInfo;